<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <style>
        #box{
            width: 500px;
            height:500px;
            margin: 100px auto;
        }
        .allcheck{margin-bottom: 30px;}
        ul li{
            list-style:none;
        }
        input{
            margin: 5px 10px;
        }
    </style>
</head>
<body>
<div id="box">
    <ul>
        <li><label ><input type="checkbox" v-model="allcheck">全选</label></li><br/>
        <li v-for="item in datalist"><label><input type="checkbox" v-model="item.status"><span>{{item.name}}</span></label></li>
   <!--     <li><label><input type="checkbox"><span>中学</span></label></li>
        <li><label><input type="checkbox"><span>高中</span></label></li>
        <li><label><input type="checkbox"><span>大学</span></label></li>
        <li><label><input type="checkbox"><span>研究生</span></label></li>
        <li><label><input type="checkbox"><span>博士</span></label></li>-->

    </ul>
    <input type="button" value="批量操作" @click="pathfn()">
</div>
<script src="vue.js"></script>
<script>
    var datalist=[
        {id:1,name:'小学',status:false},
        {id:2,name:'中学',status:false},
        {id:3,name:'高中',status:false},
        {id:4,name:'大学',status:false},
        {id:5,name:'研究生',status:false},
        {id:6,name:'博士',status:false}
    ];
    var vm = new Vue({
        el: '#box',
        data: {
            datalist:datalist
        },
        computed:{
            allcheck:{
                get:function () {
                    var remainlist=[];
                    remainlist=this.datalist.filter(function (item) {
                        return !item.status;
                    });
                    if(remainlist.length===0){
                        return true
                    }
                },
                set:function (value) {
                    console.log(value);
                    this.datalist.forEach(function (item) {
                        item.status=value;
                    });
                }
            }
        },
        methods: {
            pathfn:function () {
                var list=[];
                this.datalist.forEach(function (item) {
                    if(item.status){
                        list.push(item.id);
                    }
                });
                console.log(list);
            }
        }
    });
</script>
</body>
</html>